<template>
  <div id="layoutCollege">
    <smallNav />
    <SeaCollegeTabs />
    <el-scrollbar>
      <!-- v-if="shouldDisplayDetails" -->
      <collegedetailsHead class="main" :collegeData="collegeData" />
      <div class="college-contaier">
        <!--  v-if="shouldDisplayDetails" -->
        <collegeDetTab />
      </div>

      <router-view />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import smallNav from '@/components/SmallNav';
import SeaCollegeTabs from '@/components/SeaCollegeTabs';
import collegedetailsHead from '@/components/CollegeDetailHead';
import collegeDetTab from '@/components/CollegeDetTab';
import { getSchoolHome } from '@/api/collegeDetails/collegeDetails';
const route = useRoute();
const code = ref('');
const collegeData = ref({
  categor: '',
});
code.value = route.query.collegecode || '';
const fetchSchoolHome = () => {
  getSchoolHome({ code: code.value }).then((res) => {
    if (res.data.code == 20000) {
      collegeData.value = res.data.data;
      collegeData.value.categor = res.data.data?.categories[0];
    }
  });
};
fetchSchoolHome();
</script>

<style lang="scss" scoped>
#layoutCollege {
  // height: 100vh;
  overflow: hidden;
  .college-contaier {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
  }
}
</style>
